<template>
  <view class="main">
    <u-navbar :border-bottom="false" back-icon-size="48" title="课程详情" title-color="#FFFFFF"
              back-icon-color="#FFFFFF" :background="background">
      <view slot="right" style="padding-right: 32rpx;" @click="showShare=true">
        <image style="width: 48rpx;
				height: 48rpx;" src="../../../../static/imgs/fengxiang.png" mode=""></image>
      </view>
    </u-navbar>
    <view class="content">
      <view class="banner">
        <image :src="current.class_pic" mode=""></image>
      </view>
      <view class="audioInfo">
        <view class="type">
          {{ current.is_free}}收听
        </view>
        <view class="title">
          {{ current.class_name }}
        </view>
        <view class="tip">
          {{ current.summary }}
        </view>
      </view>
      <view class="userInfo">
        <view class="left">
          <image :src="current.owner_avatar" mode=""></image>
          <text>{{ current.owner_name }}</text>
        </view>
        <view class="right" @click="showGivemoney=true">
          打赏
        </view>
      </view>
      <view class="playBox">
        <view class="slider">
          <view class="start-time">
            {{ curTime }}
          </view>
          <slider class="slider-wrop" min="0" :max="max_currentTime" :value="currentTime" activeColor="#dedede"
                  backgroundColor="#b6b6b6" block-size="12" @change="changeCurrtime"/>
          <view class="end-time">
            {{ cutime }}
          </view>
        </view>
        <view class="pay-bar">
          <view class="back">
            <image src="../../../../static/imgs/shangyishou.png" mode="" @click="preaAd"></image>
          </view>
          <!-- 	<view class="play">
            <image src="../../../../static/imgs/playIcon.png" mode=""></image>
          </view> -->
          <view class="play">
            <image src="../../../../static/imgs/zantingbf.png" mode="" @click="player" v-if="!playing"></image>
            <image src="../../../../static/imgs/zhangtingbf.png" mode="" @click="player" v-else></image>
          </view>
          <view class="next">
            <image src="../../../../static/imgs/nextIcon.png" mode="" @click="nextAd"></image>
          </view>
          <view class="menu" @click="showMenu=true">
            <image src="../../../../static/imgs/menuIcon.png" mode="" ></image>
          </view>
        </view>
      </view>
    </view>

    <u-popup v-model="showShare" mode="bottom" :closeable="true" border-radius="24" height="240">
      <Sharewx></Sharewx>
<!--      <view class="shareBox">-->
<!--        <view class="share-item" @click="shareWeifriend">-->
<!--          <image src="../../../../static/imgs/weixinhy.png" mode=""></image>-->
<!--          <text>微信好友</text>-->
<!--        </view>-->
<!--        <view class="share-item" @click="shareCircle">-->
<!--          <image src="../../../../static/imgs/pengyouq.png" mode=""></image>-->
<!--          <text>朋友圈</text>-->
<!--        </view>-->
<!--      </view>-->
    </u-popup>
    <u-popup v-model="showMenu" mode="bottom" :closeable="true" border-radius="16">
      <view class="menuBox">
        <scroll-view scroll-y="true" style="height: 600rpx;">
          <view class="title">
            共{{ bf_list.length > 0 ? bf_list.length : 0 }}期
          </view>
          <view class="menu-ul">
            <view class="menu-li" v-for="(item,index) in bf_list" :key="index" @click="selectCurr(item)">
              <view class="text">
                {{ item.class_name }}
              </view>
              <view class="other">
                <view class="type">
                  {{ item.is_free }}收听
                </view>
                <view class="date">
                  <u-icon name="clock" color="#999999" size="28"></u-icon>
                  <text>{{ calcTimer(item.resource_time) }}</text>
                </view>
              </view>
            </view>
          </view>
        </scroll-view>
      </view>
    </u-popup>
    <u-popup v-model="showGivemoney" mode="bottom" :closeable="true" border-radius="16">
      <view class="rewordPop">
        <view class="title">
          打赏
        </view>
        <view class="moneyBox">
          <view class="li" :class="{cat:s_money == 1}" @click="changeDS(1)">
            1元
          </view>
          <view class="li" :class="{cat:s_money == 5}" @click="changeDS(5)">
            5元
          </view>
          <view class="li" :class="{cat:s_money == 10}" @click="changeDS(10)">
            10元
          </view>
        </view>
        <view class="payBtn">
          立即支付
        </view>
      </view>
    </u-popup>
  </view>
</template>
<script>
import myRequest from '@/api/educate.js'
import Sharewx from '@/components/sharewx'

export default{
  components:{
    Sharewx
  },
  data() {
    return {
      showGivemoney: false,
      showShare    : false,
      showMenu     : false,
      duration     : '100',
      //currentTime: 0,
      max_currentTime: 100,
      background     : {
        backgroundColor: 'rgba(255,255,255,0)'
      },
      current        : {
        poster: 'https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/7fbf26a0-4f4a-11eb-b680-7980c8a877b8.png',
        name  : '致爱丽丝',
        author: '暂无',
        src   : '1. https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-hello-uniapp/2cc220e0-c27a-11ea-9dfb-6da8e309e0d8.mp3',
      },
      audioAction    : {
        method: 'pause'
      },
      id             : 0,
      cid            : 0,
      cutime         : '00:00',
      cutimer        : 0,
      audioContext   : null,
      datas          : {},
      now_bf         : 0,
      playing        : false,
      curTime        : '00:00',
      curTimer       : 0,
      playerTime     : null,
      bf_list:[],
      s_money:1
    }
  },
  onLoad(options) {
    this.id     = options.id
    this.cid    = options.cid
    this.audioContext     = uni.createInnerAudioContext()
    this.changeProgress()
    this.getDatas()

  },
  onUnload(){
    this.stoper()
  },
  methods : {
    changeCurrtime(val){
      //this.stoper()
      if(this.playing){
        this.playing = false
        this.audioContext.pause()
      }
      let jd = val.detail.value
      let s = this.cutimer / 100
      this.curTimer = jd * s
      //console.log(this.curTimer)
      this.audioContext.seek(this.curTimer)
      setTimeout(()=>{
        this.player()
      },1000)

      //this.player()
    },
    //获取当前播放数据
    async changeProgress() {
      let result = await myRequest.getEducateSeriesClass({id: this.id})
      if (result.status) {
        this.current = result.data
        this.current.is_free = this.current.is_free === '1' ? '免费':'收费'
        if (this.current.resource_url !== '') {
          //TODO 设置音频 判断当前音频是否收费 判断会员是否购买VIP
          this.play_init()
        }
      }
    },
    async getDatas() {
      let res = await myRequest.getEducateDetails({id: this.cid})
      if (res.status) {
        this.datas = res.data
        this.bf_list = res.data.class.data
      }
    },
    play_init(){
      this.now_bf = this.current.id
      this.audioContext.src = this.current.resource_url;
      this.audioContext.onCanplay(() => {
        let duration = this.audioContext.duration
        this.cutimer = duration
        this.cutime  = this.calcTimer(duration)
        this.curTimer= 0
      })
      this.audioContext.onError((res) => {
        console.log(res.errMsg);
        console.log(res.errCode);
      });
    },
    selectCurr(item){
      this.stoper()
      this.current = item
      this.play_init()
      this.showMenu = false
    },
    //下一条
    nextAd() {
      try{
        this.stoper()
        this.bf_list.forEach((value,index,arrSelf) => {
          let selected = index + 1
          if(value.id === this.now_bf){
            if(index + 1 === arrSelf.length){
              uni.showToast({
                title:'没有更多了',
                icon:'none'
                            })
              throw Error()
            }
            this.current = arrSelf[selected]
            this.play_init()
            setTimeout(()=>{
              this.player()
            },1000)
            throw Error()
          }
        })
      }catch (err){
        console.log(err)
      }


    },
    //上一条
    preaAd() {
      try{
        this.stoper()
        this.bf_list.forEach((value,index,arrSelf) => {
          let selected = index - 1
          if(value.id === this.now_bf){
            if(index - 1 < 0){
              uni.showToast({
                              title:'这是第一条了',
                              icon:'none'
                            })
              throw Error()
            }
            this.current = arrSelf[selected]
            this.play_init()
            setTimeout(()=>{
              this.player()
            },1000)

            throw Error()
          }
        })
      }catch (err){
        console.log(err)
      }
    },
    //开始播放
    player() {
      if (!this.playing) {
        this.audioContext.play()
        this.audioContext.onPlay(() => {
          //console.log('开始播放'+this.now_bf);
          clearInterval(this.playerTime)
          this.playerTime = setInterval(() => {
            this.curTimer  = this.audioContext.currentTime
             //this.curTimer = this.curTime
             //console.log(this.curTimer)
            //this.curTime  = (this.curTime / 60).toFixed(2)
             this.curTime = this.calcTimer(this.curTimer)
          }, 1000)
          this.playing    = true
        })
      } else {
        this.audioContext.pause()
        this.audioContext.onPause(() => {
          //console.log('暂停播放'+this.now_bf);
          clearInterval(this.playerTime)
          this.playing = false
        })
      }
    },
    //停止播放
    stoper() {
      this.audioContext.stop()
      this.audioContext.onStop(()=>{
        //console.log('停止播放'+this.now_bf)
        this.playing = false
        clearInterval(this.playerTime)
      })
    },
    //拖动进度条
    calcTimer(timer) {
      if(isNaN(timer)){
        timer = Number(timer)
      }
      let mm = Math.floor(timer / 60)
      let ss = Math.floor(timer % 60)
      if (mm < 10) {
        mm = '0' + mm
      }
      if (ss < 10) {
        ss = '0' + ss
      }
      return mm + ':' + ss
    },
    updateJd(timer) {
    },
    changeDS(val){
      this.s_money = val
    },
    shareWeifriend(){},
    shareCircle(){},
  },
  computed: {
    currentTime() {
      let timer = this.curTimer
      //每秒移动多少
      let dur   = this.cutimer
      let sle =  100 / dur
      //console.log(sle)
      return timer * sle
    }
  }
}
</script>
<style lang="scss" scoped>
.main {
  background: linear-gradient(to bottom, #1E6997, #AF946A, #1E6997);
  height: 100%;
  display: flex;
  flex-direction: column;
}

.content {
  .banner {
    margin: 44rpx auto 0;
    width: 520rpx;
    height: 520rpx;

    image {
      width: 100%;
      height: 100%;
    }
  }

  .audioInfo {
    padding: 0 20rpx;
    margin-top: 44rpx;

    .type {
      width: fit-content;
      height: 36rpx;
      border-radius: 4rpx;
      background: #FDE2E2;
      font-size: 24rpx;
      font-family: PingFang SC;
      font-weight: 400;
      line-height: 36rpx;
      color: #F93739;
      text-align: center;
      padding: 0 12rpx;
    }

    .title {
      margin-top: 20rpx;
      font-size: 32rpx;
      font-family: PingFang SC;
      font-weight: 500;
      color: #FFF;
    }

    .tip {
      margin-top: 30rpx;
      font-size: 28rpx;
      font-family: PingFang SC;
      font-weight: 400;
      color: rgba(255, 255, 255, 0.8);
    }
  }

  .userInfo {
    margin-top: 32rpx;
    padding: 0 20rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .left {
      display: flex;
      align-items: center;

      image {
        width: 44rpx;
        height: 44rpx;
        border-radius: 50%;
      }

      text {
        margin-left: 16rpx;
        font-size: 28rpx;
        font-family: PingFang SC;
        font-weight: 400;
        color: rgba(255, 255, 255, 0.8);
      }
    }

    .right {
      width: 112rpx;
      height: 36rpx;
      background: #F93739;
      border-radius: 40rpx;
      font-size: 24rpx;
      font-family: PingFang SC;
      font-weight: 400;
      line-height: 36rpx;
      color: #FFF;
      text-align: center;
    }
  }

  .playBox {
    position: absolute;
    bottom: 20rpx;
    padding: 0 20rpx;

    .slider {
      width: 660rpx;
      display: flex;
      align-items: center;

      .start-time,
      .end-time {
        width: 20rpx;
        height: 100%;
        font-size: 20rpx;
        color: #C1C1C1;
      }

      .slider-wrop {
        margin-left: 64rpx;
        flex: 1;
      }
    }

    .pay-bar {
      display: flex;
      align-items: center;
      padding-left: 136rpx;

      .back,
      .next {
        image {
          width: 48rpx;
          height: 48rpx;
        }
      }

      .play {
        image {
          width: 104rpx;
          height: 104rpx;
          margin: 0 100rpx;
        }
      }

      .menu {
        margin-left: auto;

        image {
          width: 32rpx;
          height: 32rpx;
        }
      }
    }
  }

}

.shareBox {
  display: flex;
  align-items: center;

  .share-item {
    width: 356rpx;
    height: 240rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    image {
      width: 88rpx;
      height: 88rpx;
    }

    text {
      font-size: 28rpx;
      font-family: Segoe UI;
      font-weight: 400;
      color: #333;
      margin-top: 20rpx;
    }
  }
}

.menuBox {
  padding: 0 20rpx;

  .title {
    width: 100%;
    height: 88rpx;
    line-height: 100rpx;
  }

  .menu-ul {
    width: 100%;

    .menu-li {
      &:first-child {
        border-top: 2rpx solid #F2F2F7;
      }

      width: 100%;
      height: 140rpx;
      border-bottom: 2rpx solid #F2F2F7;
      display: flex;
      flex-direction: column;
      justify-content: center;

      .text {
        font-size: 32rpx;
        font-family: PingFang SC;
        font-weight: 400;
        color: #333;
      }

      .other {
        margin-top: 14rpx;
        display: flex;
        align-items: center;

        .type {
          width: fit-content;
          height: 36rpx;
          background: #DDFDF1;
          border-radius: 4rpx;
          font-size: 20rpx;
          font-family: PingFang SC;
          font-weight: 400;
          text-align: center;
          line-height: 36rpx;
          color: #29A076;
          padding: 0 10rpx;
        }

        .date {
          margin-left: 20rpx;
          font-size: 24rpx;
          font-family: PingFang SC;
          font-weight: 400;
          color: #999;
        }
      }
    }
  }
}

.rewordPop {
  padding: 20rpx;

  .title {
    text-align: center;
    width: 100%;
    height: 100rpx;
    line-height: 100rpx;
    font-size: 34rpx;
    font-family: PingFang SC;
    font-weight: 400;
    color: #333;
    border-bottom: 2rpx solid #F2F2F7;
  }

  .moneyBox {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 40rpx;

    .li {
      width: 220rpx;
      height: 88rpx;
      background: #F8F8F8;
      border-radius: 4rpx;
      font-size: 28rpx;
      font-family: PingFang SC;
      font-weight: 400;
      color: #333;
      line-height: 88rpx;
      text-align: center;
    }

    .cat {
      color: #F16026;
      background: #FDE7DF;
      border: 2rpx solid #FF9D00;
    }
  }

  .payBtn {
    margin: 80rpx auto 0;
    width: 710rpx;
    height: 88rpx;
    background: linear-gradient(180deg, #FEA837 0%, #F70 100%);
    border-radius: 16rpx;
    font-size: 34rpx;
    font-family: PingFang SC;
    font-weight: 400;
    color: #FFF;
    text-align: center;
    line-height: 88rpx;
  }
}
</style>
